<template>
  <div class="ssjy_class">
    <div class="topTitle df aic">
      <div class="numBox" v-for="(item,index) in 5" :key="index">{{index}}</div>
      <span class="cf fwBlod fs28">种</span>
    </div>

    <div class="productEcharts mt70" id="productEcharts"></div>

    <div class="pr_bottom df aic jcsa ml10">
      <img src="@/assets/government/lnputSupervision/super_13.png" style="width:27px;height:27px" />
      <div class="df aic fww jcsa pt20">
        <div class="top_Item ml10 mb30" v-for="(item,index) in jylList" :key="index">
          <div class="item_value">{{item.value}}</div>
          <div class="item_name">{{item.name}}</div>
        </div>
      </div>
      <img src="@/assets/government/lnputSupervision/super_12.png" style="width:27px;height:27px" />
    </div>
  </div>
</template>
    
    
<script>
import * as echarts from "echarts";
export default {
  components: {},
  data() {
    return {
      jylList: [
        {
          name: "除草剂",
          value: 124
        },
        {
          name: "杀虫/菌剂",
          value: 109
        },
        {
          name: "调节剂",
          value: 94
        },
        {
          name: "杀虫剂",
          value: 104
        },
        {
          name: "杀菌剂",
          value: 102
        },
        {
          name: "杀鼠剂",
          value: 102
        }
      ]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var chartDom = document.getElementById("productEcharts");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {},
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        toolbox: {
          show: true,
          feature: {}
        },
        series: [
          {
            name: "Product",
            type: "pie",
            radius: [20, 100],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 5
            },
            data: [
              { value: 30, name: "种子" },
              { value: 28, name: "兽药" },
              { value: 26, name: "肥料" },
              { value: 24, name: "饲料" },
              { value: 22, name: "农药" }
            ]
          }
        ]
      };

      option && myChart.setOption(option);
    }
  }
};
</script>
    
    <style lang="scss" scoped>
.productEcharts {
  width: 540px;
  height: 250px;
}
.tac {
  text-align: center;
}
.cFFF44A {
  color: #fff44a;
}
.ssjy_class {
  text-align: center;
  width: 551px;
  height: 638px;
  background-image: url(".././../../../assets/government/lnputSupervision/super_3.png");
  background-repeat: no-repeat;
  background-size: 551px;
  position: relative;
  .topTitle {
    position: absolute;
    top: 6px;
    right: 20px;
    .numBox {
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 28px;
      color: #ffffff;
      text-align: center;
      line-height: 30px;
      width: 28px;
      height: 30px;
      background: #0072ff;
      border-radius: 4px;
      margin-right: 5px;
    }
  }
  .top_Item {
    width: 127px;
    height: 60px;
    background-image: url(".././../../../assets/government/lnputSupervision/super_2.png");
    background-repeat: no-repeat;
    background-size: 127px;
    padding-top: 10px;
    .item_name {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 14px;
      color: #ffffff;
    }
    .item_value {
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 20px;
      background: -webkit-linear-gradient(
        180deg,
        #f6f682,
        #ffb401
      ); /* Chrome, Safari */
      background: linear-gradient(180deg, #f6f682, #ffb401); /* 标准语法 */
      -webkit-background-clip: text; /* Chrome, Safari */
      background-clip: text;
      -webkit-text-fill-color: transparent; /* Chrome, Safari */
      color: transparent; /* 兼容不支持background-clip的浏览器 */
    }
  }
  .pr_bottom {
    width: 533px;
    height: 316px;
    background-image: url(".././../../../assets/government/lnputSupervision/super_8.png");
    background-repeat: no-repeat;
    background-size: 533px;
    padding: 0 20px;
  }
}
.fwBlod {
  font-weight: bold;
}
.fs28 {
  font-size: 24px;
}
</style>
    